import React from 'react'

import defaultImg from '../../pages/assets/images/发送.jpg'
import sendImg from '../../pages/assets/images/发送2.jpg'

//导入connect
import {connect} from 'react-redux'

class Boy extends React.Component {

    //定义UI级别的state
    state = {
        isSend: false
    }

    handleClick = () => {
        console.log('Boy-props', this.props) //{name: "jerry", age: 19, sendLove: ƒ, stopLove: ƒ}

        let {isSend} = this.state
        if (!isSend) {
            //这里需要取反，我们默认状态是false，显示的是发送爱心
            this.props.sendLove()
        } else {
            this.props.stopLove()
        }

        this.setState({
            isSend: !isSend
        })
    }

    render() {
        return (
            <div>
                <img src={this.state.isSend ? sendImg : defaultImg}/>
                <div>
                    <button onClick={this.handleClick}>{this.state.isSend ? '停止发送' : '发送爱心'}</button>
                </div>
            </div>
        )
    }
}

/*
* 这个函数要有一个返回值，返回值是一个对象
* */
const mapDispatchProps = dispatch => {
    return {
        //利用dispatch发送一个action
        //传递action对象，要定义一个type属性
        sendLove: () => {
            dispatch({type: 'send_love'})
        },
        stopLove: () => {
            dispatch({type: 'stop_love'})
        }
    }
}
//是发送方，所以要实现connect第二个参数
export default connect(null, mapDispatchProps)(Boy)
